<template>
  父组件
  <template v-for="item in names" :key="item">
    <button @click="btnClick(item)" :class="{ active: currentName === item }">{{ item }}</button>
  </template>
  <hr />
  <!-- :is="currentName"属性绑定的值必须是注册过的组件 -->
  <!-- 动态组件的传值 -->
  <component :is="currentName" :currentName='currentName'/>
</template>

<script>
import Home from './pages/home.vue'
import About from './pages/about.vue'
import Mime from './pages/mime.vue'

export default {
  components: { Home, About, Mime },
  data() {
    return {
      names: ['Home', 'About', 'Mime'],
      currentName: 'Home',
    }
  },
  methods: {
    btnClick(name) {
      this.currentName = name
    },
  },
}
</script>

<style scoped>
.active {
  background-color: pink;
}
</style>
